import React, {PureComponent,Fragment} from 'react';
import {
    Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete,Card,DatePicker
} from 'antd';
import { connect } from 'dva';

const { Option } = Select;
const AutoCompleteOption = AutoComplete.Option;

const residences = [{
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [{
      value: 'hangzhou',
      label: 'Hangzhou',
      children: [{
        value: 'xihu',
        label: 'West Lake',
      }],
    }],
  }, {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [{
      value: 'nanjing',
      label: 'Nanjing',
      children: [{
        value: 'zhonghuamen',
        label: 'Zhong Hua Men',
      }],
    }],
  }];
  
class Index extends PureComponent {
state = {
    confirmDirty: false,
    autoCompleteResult: [],
};

handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
    if (!err) {
        console.log('Received values of form: ', values);
    }
    });
}

handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
}

compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
    callback('Two passwords that you enter is inconsistent!');
    } else {
    callback();
    }
}

validateToNextPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
    form.validateFields(['confirm'], { force: true });
    }
    callback();
}

handleWebsiteChange = (value) => {
    let autoCompleteResult;
    if (!value) {
    autoCompleteResult = [];
    } else {
    autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
    }
    this.setState({ autoCompleteResult });
}

render() {
    const { getFieldDecorator } = this.props.form;
    const { autoCompleteResult } = this.state;

    const formItemLayout = {
    labelCol: {
        xs: { span: 6 },
        sm: { span: 6 },
    },
    wrapperCol: {
        xs: { span: 8 },
        sm: { span: 8 },
    },
    };
    const tailFormItemLayout = {
    wrapperCol: {
        xs: {
        span: 8,
        offset: 6,
        },
        sm: {
        span: 8,
        offset: 6,
        },
    },
    };
    const prefixSelector = getFieldDecorator('prefix', {
    initialValue: '86',
    })(
    <Select style={{ width: 70 }}>
        <Option value="86">+86</Option>
        <Option value="87">+87</Option>
    </Select>
    );

    const websiteOptions = autoCompleteResult.map(website => (
    <AutoCompleteOption key={website}>{website}</AutoCompleteOption>
    ));

    return (
        <Card bordered={false}>                          
            <Form onSubmit={this.handleSubmit}>
                <Form.Item
                    {...formItemLayout}
                    label="E-mail"
                >
                    {getFieldDecorator('email', {
                        rules: [{
                        type: 'email', message: 'The input is not valid E-mail!',
                        }, {
                        required: true, message: 'Please input your E-mail!',
                        }],
                    })(
                        <Input />
                    )}
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label="Password"
                >
                    {getFieldDecorator('password', {
                        rules: [{
                        required: true, message: 'Please input your password!',
                        }, {
                        validator: this.validateToNextPassword,
                        }],
                    })(
                        <Input type="password" />
                    )}
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label="Confirm Password"
                >
                    {getFieldDecorator('confirm', {
                        rules: [{
                        required: true, message: 'Please confirm your password!',
                        }, {
                        validator: this.compareToFirstPassword,
                        }],
                    })(
                        <Input type="password" onBlur={this.handleConfirmBlur} />
                    )}
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label={(
                        <span>
                        Nickname&nbsp;
                        <Tooltip title="What do you want others to call you?">
                            <Icon type="question-circle-o" />
                        </Tooltip>
                        </span>
                    )}
                >
                    {getFieldDecorator('nickname', {
                        rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
                    })(
                        <Input />
                    )}
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label="Habitual Residence"
                >
                    {getFieldDecorator('residence', {
                        initialValue: ['zhejiang', 'hangzhou', 'xihu'],
                        rules: [{ type: 'array', required: true, message: 'Please select your habitual residence!' }],
                    })(
                        <Cascader options={residences} />
                    )}
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label="Phone Number"
                >
                {getFieldDecorator('phone', {
                    rules: [{ required: true, message: 'Please input your phone number!' }],
                })(
                    <Input addonBefore={prefixSelector} style={{ width: '100%' }} />
                )}
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label="Website"
                >
                    {getFieldDecorator('website', {
                        rules: [{ required: true, message: 'Please input website!' }],
                    })(
                        <AutoComplete
                            dataSource={websiteOptions}
                            onChange={this.handleWebsiteChange}
                            placeholder="website"
                        >
                            <Input />
                        </AutoComplete>
                    )}
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label="Captcha"
                    extra="We must make sure that your are a human."
                >
                <Row gutter={8}>
                    <Col span={12}>
                        {getFieldDecorator('captcha', {
                            rules: [{ required: true, message: 'Please input the captcha you got!' }],
                        })(
                            <Input />
                        )}
                    </Col>
                    <Col span={12}>
                        <Button>Get captcha</Button>
                    </Col>
                </Row>
                </Form.Item>
                <Form.Item
                    label="inline"
                    {...formItemLayout}
                    style={{ marginBottom: 0 }}
                    validateStatus="error"
                >
                    <Form.Item
                        //validateStatus="error"
                        help="Please select the correct date"
                        style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
                    >
                        <DatePicker style={{ width: '100%' }}/>
                    </Form.Item>
                    <span style={{ display: 'inline-block', width: '24px', textAlign: 'center' }}>
                        -
                    </span>
                    <Form.Item
                        style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
                    >
                        <DatePicker style={{ width: '100%' }}/>
                    </Form.Item>
                </Form.Item>
                <Form.Item
                    label="会员权益"
                    {...formItemLayout}
                    wrapperCol={{span:12}}
                     style={{ marginBottom: 0 }}
                >
                    {getFieldDecorator('memberCoupon', {
                        rules: [{
                            required: true, message: '会员权益最少一项'
                        }]
                    })(
                    <Checkbox.Group onChange={this.handleClickCheckbox} style={{width:'100%'}}>
                        <Row>
                            <Col span={6}>
                                <Form.Item>
                                    <Checkbox value="1">包邮</Checkbox>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item>
                                    <Input />
                                </Form.Item>
                            </Col>  
                        </Row>
                        <Row>
                            <Col span={6}>
                                <Form.Item>
                                    <Checkbox value="2">会员折扣</Checkbox>
                                </Form.Item>                                
                            </Col>  
                            <Col span={6}>
                                <Form.Item>
                                    <Input />
                                </Form.Item>
                            </Col>
                        </Row> 
                        <Row>
                            <Col span={6}>
                                <Form.Item>
                                    <Checkbox value="3">领卡即送积分</Checkbox>
                                </Form.Item>                                
                            </Col>  
                            <Col span={6}>
                                <Form.Item>
                                    <Input />
                                </Form.Item>
                            </Col>
                        </Row>    
                        <Row>
                            <Col span={6}>                                
                                <Form.Item  style={{ marginBottom: 0 }}>
                                    <Checkbox value="4">领卡送优惠券</Checkbox>
                                </Form.Item> 
                            </Col> 
                            <Col span={6}>
                                <Form.Item  style={{ marginBottom: 0 }}>
                                    <Input />
                                </Form.Item>
                            </Col> 
                        </Row>                                                                                        
                    </Checkbox.Group>
                    )}
                </Form.Item>
                <Form.Item>

                </Form.Item>
                <Form.Item 
                    {...tailFormItemLayout}
                >
                    {getFieldDecorator('agreement', {
                        valuePropName: 'checked',
                    })(
                        <Checkbox>I have read the <a href="">agreement</a></Checkbox>
                    )}
                </Form.Item>
                <Form.Item 
                    {...tailFormItemLayout}
                >
                    <Button type="primary" htmlType="submit">Register</Button>
                </Form.Item>
            </Form>                      
        </Card>
    );
}
}
  
const WrappedRegistrationForm = Form.create({ name: 'register' })(Index);
  
export default connect(({global }) => ({
    global,
}))(WrappedRegistrationForm);